<template>
	<view class="store-manage">
		<view class="website_info" v-if="stats.website">
			<image class="website-avatar" :src="stats.website.headimg" mode="aspectFit"></image>
			<view class="website-data">
				<view class="website-name">
					{{stats.website.name}}
				</view>
				<view class="website-position">
					{{stats.website.type_name}}
				</view>
			</view>
		</view>
		<view class="top">
			<view class="search">
				<input class="search-input" type="text" v-model="title" value="" placeholder="搜索" @confirm="onSearch" />
				<view class="search-icon" @click="onSearch"></view>
			</view>
			<!-- 导航 -->
			<view class="navs">
				<view class="nav-item" :class="{active:item.value === navValue}" v-for="(item,index) in navs"
					:key="index" @click="switchTab(item.value)">
					{{item.title}}({{stats[item.index]}})
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<mescroll-uni class="list-wrap" @getData="getListData" :top="mescrollTop" refs="mescroll" :size="10">
			<block slot="list">
				<view class="store-list" v-if="list.length > 0">
					<view class="store-item" v-for="item in list" :key="item.id">
						<view class="store-head">
							<image class="store-logo" :src="item.headimg" mode="aspectFit"></image>
							<view class="store-name">{{item.fenxiao_name}}</view>
						</view>
						<view class="store-body">
							<view class="store-body-row flex-left">
								<view class="store-data">店主昵称：{{item.nickname || ''}}</view>
								<view class="store-data">联系电话：{{item.mobile || ''}}</view>
							</view>
							<view class="store-body-row flex-left">
								<view class="store-data">创建人：{{item.website_name || ''}}</view>
								<view class="store-data">创建人电话：{{item.website_phone || ''}}</view>
							</view>
							<view v-if="item.parent_info" class="store-body-row flex-left">
								<view class="store-data">上级店主：{{item.parent_info.fenxiao_name || ''}}</view>
								<view class="store-data">联系电话：{{item.parent_info.mobile || ''}}</view>
							</view>
							<view class="flex-left">
								<view class="store-data">等级：{{item.level_name || ''}}</view>
								<view class="store-data">申请时间：{{item.create_time}}</view>
							</view>
						</view>
						<view class="store-footer">
							<view class="store-status" :class="item.state ? 'status-'+item.state : ''">#{{item.state_name}}</view>
							<view class="store-link" v-if="item.fenxiao_id > 0 && item.state == 2"
								@click="$util.redirectTo('/businesscenter/orders-data?role=promoters&id='+item.fenxiao_id)">
								查看数据<view class="store-link-icon"></view>
							</view>
						</view>
					</view>
				</view>

				<ns-empty v-else text="暂无店主记录" :isIndex="!1"></ns-empty>
			</block>
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navs: [{
					title: '全部',
					value: '0',
					index: 'all'
				}, {
					title: '审核中',
					value: '1',
					index: 'verify'
				}, {
					title: '审核通过',
					value: '2',
					index: 'adopt'
				}, {
					title: '审核拒绝',
					value: '3',
					index: 'fail'
				}],
				navValue: '0',
				stats: {},
				list: [{
					id: '1'
				}],
				page: 1,
				page_size: 10,
				page_count: 1,
				business_id: '',
				title: '',
				mescrollTop: 190 //有头部信息改变该值
			}
		},
		onLoad(e) {
			this.business_id = e.business_id || '';
		},
		onShow() {
			if (!uni.getStorageSync('token')) {
				this.$util.redirectTo(
					'/otherpages/login/login/login', {
						back: '/businesscenter/store-manage'
					},
					'redirectTo'
				);
			}
		},
		methods: {
			storeClass(state) {
				return 'status-' + state;
			},
			toEdit(url) {
				this.$util.redirectTo('/otherpages/webview/webview', {
					link: encodeURIComponent(url)
				});
			},
			onSearch() {
				this.page = 1;
				this.list = [];
				this.mescroll.resetUpScroll();
				// this.getListData();
			},
			switchTab(index) {
				this.navValue = index;
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			getListData(mescroll) {
				this.mescroll = mescroll;
				this.$api.sendRequest({
					url: '/city/api/index/getPromoterList',
					data: {
						page: mescroll.num,
						page_size: mescroll.size,
						business_id: this.business_id,
						fenxiao_name: this.title,
						status: this.navValue
					},
					success: res => {
						let newArr = [];
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
							this.stats = res.data;
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
						if (this.stats.website) {
							this.mescrollTop = 410;
						}

						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						newArr.forEach(v => {
							v.is_off = 0;
						});

						this.list = this.list.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../common/css/mixins.scss';

	.flex-left {
		@include flex(flex-start);
	}

	.website_info {
		width: 750rpx;
		height: 216rpx;
		padding: 48rpx;
		background: #FF4544;
		@include flex(flex-start);

		.website-avatar {
			width: 120rpx;
			height: 120rpx;
			border: 2rpx solid #FFF;
			border-radius: 120rpx;
		}

		.website-data {
			margin-left: 20rpx;

			.website-name {
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 45rpx;
			}

			.website-position {
				margin-top: 12rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 33rpx;
			}
		}

	}

	.store-manage {}

	.top {
		padding: 16rpx 30rpx 0 30rpx;
		width: 750rpx;
		background: #FFFFFF;

		.search {
			@include flex(space-between);
			width: 690rpx;
			height: 68rpx;
			background: #F8F8F8;
			border-radius: 34rpx;
			padding: 0 40rpx;

			.search-input {
				font-size: 24rpx;
				flex-grow: 2;
				color: #606266;
			}

			.search-icon {
				@include image('icon-searach.png');
				width: 48rpx;
				height: 48rpx;
			}
		}

		.navs {
			margin-top: 24rpx;
			@include flex(space-between);

			.nav-item {
				padding-bottom: 24rpx;
				font-size: 28rpx;
				color: #303133;
				line-height: 40rpx;

				&.active {
					@include flex(center, center, column);
					position: relative;
					color: #FF4544;
					font-weight: 500;

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 0;
						width: 60rpx;
						height: 4rpx;
						background: #FF4544;
					}
				}
			}
		}
	}

	.store-list {}

	.store-item {
		margin: 24rpx 30rpx;
		margin-top: 0;
		padding: 20rpx 30rpx;
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 8rpx;

		.store-head {
			@include flex(flex-start);
			padding-bottom: 16rpx;
			border-bottom: 1px solid #E8E8E8;

			.store-logo {
				width: 68rpx;
				height: 68rpx;
			}

			.store-name {
				margin-left: 20rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #303133;
				line-height: 40rpx;
			}
		}

		.store-body {
			padding: 30rpx 0;

			.store-body-row {
				margin-bottom: 16rpx;
			}

			.store-data {
				font-size: 24rpx;
				color: #909399;
				line-height: 34rpx;

				&:nth-child(2n+1) {
					width: 258rpx;
				}
			}
		}

		.store-footer {
			@include flex(space-between);
			border-top: 1px solid #E8E8E8;
			padding-top: 20rpx;

			.store-status {
				font-size: 28rpx;
				color: #12D0AE;
				line-height: 40rpx;

				&.status-1 {
					color: #0078FF;
				}

				&.status-2 {
					color: #12D0AE;
				}

				&.status-3 {
					color: #FF4544;
				}
			}

			.store-link {
				@include flex;

				.store-link-icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>
